<template>
    <div class="order_detail_page">
        <div class="big_title">基本信息</div>

        <ul class="info_list_con">
            <li>
                <div class="item">
                    <div class="tit">订单编号 </div>
                    <div class="txt">{{this.orderInfon.orderNo}}</div>
                </div>
                <div class="item">
                    <div class="tit">订单状态</div>
                    <div class="txt">{{  this.orderInfon.statusRemark?this.orderInfon.statusRemark:"--" }} </div>
                </div> 
                <div class="item">

                    <div class="tit">结算金额</div>
                    <div class="txt">{{ this.orderInfon.settlementAmount?this.orderInfon.settlementAmount:0 }} 元</div>
                </div>
              <div class="item">
                    <div class="tit">渠道</div>

                    <div class="txt">{{   this.orderInfon.channel?this.orderInfon.channel:"--" }}</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="tit">预计发货时间</div>
                    <div class="txt">{{  this.orderInfon.estimatedDeliveryTime? this.orderInfon.estimatedDeliveryTime:"--" }}</div>
                </div>
                <div class="item">
                    <div class="tit">期望发货时间</div>
                    <div class="txt">{{   this.orderInfon.expectedDeliveryTime?this.orderInfon.expectedDeliveryTime:"--"  }}</div>
                </div>
                <div class="item">
                    <div class="tit">指定发货时间</div>
                    <div class="txt">{{  this.orderInfon.specifyDeliveryTime?this.orderInfon.specifyDeliveryTime:"--" }}</div>
               
               
                </div>
                <div class="item">
                    <div class="tit">客户留言</div>
                    <div class="txt">{{  this.orderInfon.remark?this.orderInfon.remark:"--" }}</div>
                </div>
                


                <div class="item">
                    <div class="tit">是否需要质检</div>
                    <div class="txt">{{  this.orderInfon.qualityInspectionRemark?this.orderInfon.qualityInspectionRemark:"--" }}</div>
                </div>
                <div class="item">
                    <div class="tit">工厂备注</div>
                    <div class="txt">{{  this.orderInfon.mchRemark?this.orderInfon.mchRemark:"--"  }}</div>
                </div>
            </li>
            <li>
                <div class="item">
                    <div class="tit">工厂送货至</div>
                    <div class="txt">
                        <p>{{ this.orderInfon.warehouseDTO.warehouseName?this.orderInfon.warehouseDTO.warehouseName:"--" }}</p>
                        <p>
                            {{  this.orderInfon.warehouseDTO.name?this.orderInfon.warehouseDTO.name:"--" }}
                            {{ this.orderInfon.warehouseDTO.mobile?this.orderInfon.warehouseDTO.mobile:"--" }}
                        </p>
                        
                        <p>
                            {{this.orderInfon.warehouseDTO.provice?this.orderInfon.warehouseDTO.provice:"--"}} 
                            {{ this.orderInfon.warehouseDTO.city?this.orderInfon.warehouseDTO.city:"--" }}     
                            {{ this.orderInfon.warehouseDTO.area?this.orderInfon.warehouseDTO.area:"--" }} 
                            {{ this.orderInfon.warehouseDTO.address?this.orderInfon.warehouseDTO.address:"--" }}
                        </p>
                    </div>
                </div>
                <div class="item">


                    <div class="tit">客户名</div>
                    <div class="txt">{{  this.orderInfon.name?this.orderInfon.name:"--" }}</div>
                </div>
            </li>
        </ul>
        <div class="big_title">商品信息</div>
        <el-table ref="multipleTable" border :data="goodArr" tooltip-effect="dark" style="width: 100%"  
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            @selection-change="handleSelectionChange" class="order_good_table">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column  props="marque" label="商品型号" width="200">
                <template slot-scope="scope">
                    <div>{{ scope.row.marque }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品图片" width="175">
                <template slot-scope="scope">
                    <img :src= "scope.row.img " alt="" class="good_img"/>
                </template>
            </el-table-column>
            <el-table-column prop="subtitle" label="商品名称" width="200">
                <template slot-scope="scope">
                    <div>{{  scope.row.productName?scope.row.productName:"--" }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="型号/规格" width="200" >
                <template slot-scope="scope">
                    <div>{{  scope.row.attribute?scope.row.attribute:"--" }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="采购价(元)" width="100">
                <template slot-scope="scope">
            <div>{{  scope.row.settlementPrice?scope.row.settlementPrice:"--" }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="采购数"  width="65">
                <template slot-scope="scope">
                    <div>{{  scope.row.num?scope.row.num:"--" }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="退货数"></el-table-column>
            <el-table-column prop="address" label="是否定制"  ></el-table-column> -->
            <el-table-column prop="address" label="状态"  width="150">
                <template slot-scope="scope">
                    <div>
                        <p class="stock_up_title" v-if="orderInfon.status == 4"> 工厂备货完成 </p>

                        <p> {{  scope.row.status | goodStatusFn }} </p>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="address" label="售后状态"  ></el-table-column> -->
            <!-- <el-table-column prop="address" label="BOM信息"  ></el-table-column> -->
            <el-table-column prop="address" label="操作"  ></el-table-column>
        </el-table>
        
        <div class="beihuo_btn_group">
            <!-- <el-button type="success" class="btn" v-if="confirmGoodStatus && multipleSelection.length == goodArr.length" @click="sendGoodsFn">安排发货</el-button>
            <el-button type="primary" class="btn" v-else @click="stockUpGoodFn">工厂备货完成</el-button>    
            <el-button class="btn" v-if="confirmGoodStatus" @click="cancelGoodFn">撤销工厂备货完成</el-button> -->
            <el-button type="primary" class="btn"   @click="stockUpGoodFn" v-if="orderInfon.status == 3" >工厂备货完成</el-button>   
           
           
            <el-button type="success" class="btn"   @click="sendGoodsFn" v-if="orderInfon.status == 4 && !orderInfon.shipmentType">安排发货</el-button>            
            <el-button class="btn"   @click="cancelGoodFn" v-if="orderInfon.status == 4 && !orderInfon.shipmentType">撤销工厂备货完成</el-button>


        </div>

        <div class="big_title">发货记录</div>
        

        <div class="send_good_title_con">
        
            <div class="info">
                <span>YS2408290000021-1</span>
                <span>安排时间: {{ orderInfon.expectedDeliveryTime }}</span>
        
                <span>发货时间: {{ orderInfon.realDeliveryTime }}</span>
            </div>


            <div class="btn_con" >
                <p class="title_msg"  v-if="orderInfon.status == 4 && orderInfon.shipmentType==1">注：先打印标签，后打印发货单，确保标签与发货单件数一致！</p>
                <div class="btn_group"  v-if="orderInfon.status == 4 && orderInfon.shipmentType == 1">
                    <el-button type="success">批量打印标签</el-button>
                    <el-button type="primary">打印发货单</el-button>
                    <el-button type="danger" @click="cancelSendGoodsFn">取消安排</el-button>
                    <el-button type="danger" @click="confirmSendGoodDialogVisible = true">确认发货</el-button>
                </div>
                <el-button type="success"   class="edit_send_good" @click="confirmSendGoodDialogVisible=true" v-if="orderInfon.status == 5">编辑发货单</el-button>
            </div>
        </div>
        <el-table :data="sendGoodTableData"  :span-method="spanMethodFn" border style="width: 100%" class="send_good_table" v-if="sendGoodStatus==5">
            <el-table-column  label="发货单/签收单" width="290" align="center">
                <template slot-scope="scope">
                    <!-- <div> <img :src=" confirmSendGoodForm.sendGoodPictures[0] " alt="" class="send_good_img"/> </div> -->
                    <div> 
                        <!-- <img :src=" orderInfon.sendPhoto " alt="" class="send_good_img"/>  -->
                 
                        <el-image :src="orderInfon.sendPhoto[0]" :preview-src-list="orderInfon.sendPhoto" style="width: 100px; height: 100px" > </el-image>
                 
                    </div>
               
                </template>
            </el-table-column>
            <el-table-column prop="date" label="型号/规格" >
                <template slot-scope="scope">
                    <div> 
                        <img :src=" scope.row.img " class="good_img" alt=""/>

                        <p>编码: {{  scope.row.productCode  }}</p>
                        <p>规格：{{  scope.row.attribute }}</p>
                        <p>型号: {{  scope.row.marque  }}</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="num" label="发货数量" width="150" align="center">
                <template slot-scope="scope">
                    <div>  {{  scope.row.num }} </div>
                </template>
            </el-table-column>

            <el-table-column prop="date" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <div class="btn_group">
                        <div class="btn">打印标签</div>
                    </div>
                </template>
            </el-table-column>
        </el-table>

    
        <!-- <div class="big_title">订单处理流程</div> -->
    
        <!-- <div class="record_con">
            <el-timeline>
                <el-timeline-item timestamp="2018/4/12" placement="top">
                <el-card>
                    <h4>提交</h4>
                    <p> 提交于 2018/4/12 20:46</p>
                    
                    <el-table :data="orderTimeGoodTable" style="width: 29%;margin-top:10px;" :border="true">
                        <el-table-column
                            prop="goodName"
                            label="商品"
                            width="250">
                        </el-table-column>
                        <el-table-column
                            prop="count"
                            label="数量">
                        </el-table-column>
                    </el-table>
                </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/3" placement="top">
                <el-card>
                    <h4>提交</h4>
                    <p>提交于 2018/4/3 20:46</p>
                </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="2018/4/2" placement="top">
                <el-card>
                    <h4>提交</h4>
                    <p> 提交于 2018/4/2 20:46</p>
                </el-card>
                </el-timeline-item>
            </el-timeline>
        </div> -->


            <el-dialog
                title="确认发货,上传发货单"
                :visible.sync="confirmSendGoodDialogVisible"

                width="50%"
                :before-close="handleClose">
                <el-form ref="form" :model="confirmSendGoodForm" label-width="80px">

                    <el-form-item label="发货清单:">
                        <l-upload :limit="5" v-model="confirmSendGoodForm.sendGoodPictures" text="最多上传5张, 商品白底图尺寸450*450像素, 每张图限500K以内">
                        </l-upload>
                    </el-form-item>


                    <el-form-item label="发货备注:">                      
                        <el-input type="textarea" :rows="2" placeholder="请输入物流单号或其他备注信息" v-model="confirmSendGoodForm.remark"> </el-input>
                    </el-form-item>
                </el-form>

                <span slot="footer" class="dialog-footer"> 
                    <el-button @click="confirmSendGoodDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmGoodFn" v-if="orderInfon.status==4">确 定</el-button> 
                    <el-button type="primary" @click="editSendGoodFn" v-if="orderInfon.status==5">确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>
<script>
import {  orderDetailsInfo, stockUpGood, sendGoods, confirmSendGood, cancelGood, cancelSendGood } from '@/api/order/orderList';
import { setStorage, getStorage } from "@/utils/storage";
export default {
    data () {
        return {
            orderNo: "",
            goodArr: [],
            orderTimeGoodTable: [
                {
                    goodName: 'LKS8821-E+F+E-3RW',
                    count: 1
                }, 
                {  
                    goodName: 'LK-X2208-XXY',
                    count: 1
                }
            ],
            multipleSelection: [],
            activities: [
                {
                    content: '活动按期开始',
                    timestamp: '2018-04-15'
                }, 
                {
                    content: '通过审核',
                    timestamp: '2018-04-13'
                }, 
                {
                    content: '创建成功',
                    timestamp: '2018-04-11'
                }
            ],


            orderInfon: "",
            // 备货状态
            confirmGoodStatus: false,
            //  确认发货商品
            sendGoodTableData: [
                {
                    date: '2016-05-02'
                }


            ],
            sendGoodPhotoList: [], // 发货单图片

            confirmSendGoodDialogVisible: false,
            
            confirmSendFlag: true,
            // 确认发货 form
            confirmSendGoodForm: {
            
                sendGoodPictures: "",
                remark: ""
            },
            sendGoodFlag: false, // 确认发货
            sendGoodStatus: 1,  //  发货状态 1备货中,  2安排发货, 3确认发货
        
            shipmentType: ""
        }
    },
    mounted () {  
        this.$nextTick(function () {
            this.init()
        })
    },
    methods: {


        init: function () {
            let orderNo = window.location.href.split("orderNo=")[1];   
            this.orderNo = orderNo;
            this.getOrderInfoFn()
        },
        getOrderInfoFn: function () {
            let _this = this;
            orderDetailsInfo({

                api: "mch.App.orderV2.info",
                
                status: this.status,
                keyWords: this.keyWords,
                orderNo: this.orderNo
            }).then((res)=> {
                let resData = res.data.data;   
                if (resData) {
                    if(resData.sendPhoto != null){
                        resData.sendPhoto = resData.sendPhoto.split(",");
                    }
                    _this.orderInfon = resData;
                    _this.goodArr = resData.details;
                    _this.sendGoodTableData = resData.details;
                    _this.confirmSendGoodForm.sendGoodPictures = resData.sendPhoto; 
                    if (resData.status<3) {
                        _this.sendGoodStatus = "";
                    }

                    if (resData.status == 4) {
                        _this.sendGoodStatus = 3;
                    }

                    if (resData.status == 5) {
                        _this.sendGoodStatus = resData.status;
                    }
                }
            })              
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },


        
        // 备货完成
        stockUpGoodFn: function () {
            let _this = this;
            let goodArr = this.goodArr;
            let detailNos = "";
            if (this.multipleSelection.length !== goodArr.length) {
                this.$message.error('请选择所有商品');    
                return ;
            
            }
            let length = this.multipleSelection.length;

            // if (this.multipleSelection.length == 0) {
            //     this.$message.error('请选择商品');    
            //     return ;
            // }

            this.confirmGoodStatus = true;
            
            // if (this.multipleSelection.length > 0 && this.multipleSelection.length<goodArr.length) { 
            //     this.sendGoodStatus = 1.5;
            // }
            // if (this.multipleSelection.length == goodArr.length) { 
            //     this.sendGoodStatus = 2;
            // }
        
            this.multipleSelection.forEach((item, index)=> {
                if (index == length - 1) {

                    detailNos += item.detailNo;
                } else {
                    detailNos += item.detailNo + ",";
                }
            })
            stockUpGood({

                api: "mch.App.orderV2.ready",
                orderNo: this.orderNo,
                detailNos: detailNos
            }).then((res)=> {
                if (res.data.code == 200) {

                    _this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'success'
                    });
                    _this.getOrderInfoFn()
                } else {
                    _this.$message({
                        showClose: true,
                        message: res.data.message,         
                        type: 'error'
                    });
                }
            })
        },


        // 撤销备货完成
        cancelGoodFn: function () {
            let _this = this;
            this.sendGoodStatus = 1;

            this.confirmGoodStatus = false;
    
            let goodArr = this.goodArr;
            let detailNos = "";
            this.multipleSelection.forEach((item)=> {
                detailNos += item.detailNo + ",";
            })
    
            cancelGood({  
                api: "mch.App.orderV2.ready",
                orderNo: this.orderNo,

                detailNos: detailNos
            }).then((res)=> {
                if (res.data.code == 200) {
                    _this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'success'
                    });
                    _this.getOrderInfoFn()
                } else {
                    _this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'error'
                    });
                }
            })
        },
        // 安排发货
        sendGoodsFn: function () {
            let _this = this;
            // _this.sendGoodStatus = 3;
            sendGoods({
                api: "mch.App.orderV2.shipment",
                orderNo: this.orderNo
            }).then((res)=> { 
                if (res.data.code == 200) {
                    _this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    _this.getOrderInfoFn()
                    // _this.sendGoodStatus = 3;
                } else {   
                    _this.$message({
                        message: res.data.message,                
                        type: 'error'
                    });
                }
            })          
        },
        // 取消安排
        cancelSendGoodsFn: function () {
           // this.sendGoodStatus = 2;
            let _this = this;
            this.$confirm('确认取消吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    cancelSendGood({
                        api: "mch.App.orderV2.shipmentCancel",
                        orderNo: _this.orderNo
                    }).then((res)=> {

                        if (res.data.code == 200) {
                            _this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            _this.getOrderInfoFn()
                        //    _this.sendGoodStatus = 2;
                        } else {   
                            _this.$message({           
                                message: res.data.message,                
                                type: 'error'
                            });
                        }
                    })
                }).catch(() => {
                   
            });
        },

        // 确认发货
        confirmGoodFn: function () {
            let _this = this;
            let sendGoodPicturesArr = this.confirmSendGoodForm.sendGoodPictures;

            let sendGoodPicturesStr = sendGoodPicturesArr.join(",");
            
            this.confirmSendGoodDialogVisible = false;
            this.sendGoodFlag = true;
            confirmSendGood({
                api: "mch.App.orderV2.send",  
                // api: "mch.App.orderV2.sendUpdate",
                
                orderNo: this.orderNo,
                
                // photo:  this.confirmSendGoodForm.sendGoodPictures[0]
                photo: sendGoodPicturesStr
            }).then((res)=>{
                if (res.data.code == 200) {
                    _this.sendGoodStatus = 5; 
                    _this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    _this.sendGoodFlag = true;
                    _this.getOrderInfoFn()
                } else {
                    
                    _this.$message({
                        message: res.data.message,                
                        type: 'error'
                    });
                }
            })
        },
        
        // 编辑发货单
        editSendGoodFn: function () {
            let _this = this;
            let sendGoodPicturesArr = this.confirmSendGoodForm.sendGoodPictures;
            let sendGoodPicturesStr = sendGoodPicturesArr.join(",");
            this.confirmSendGoodDialogVisible = false;
            this.sendGoodFlag = true;
            confirmSendGood({
                // api: "mch.App.orderV2.send",   
                api: "mch.App.orderV2.sendUpdate",
                orderNo: this.orderNo,
               // photo:  this.confirmSendGoodForm.sendGoodPictures[0]

               photo: sendGoodPicturesStr
            }).then((res)=>{
                if (res.data.code == 200) {
                    _this.sendGoodStatus = 5; 
                    _this.$message({
                        message: res.data.message,
                        type: 'success'
                    });
                    _this.sendGoodFlag = true;
                    _this.getOrderInfoFn()
                } else {
                    _this.$message({
                        message: res.data.message,                
                        type: 'error'
                    });
                }
            })
        },
        spanMethodFn:function ({ row, column, rowIndex, columnIndex }) {
            let sendGoodTableData = this.sendGoodTableData;
            let lenth = sendGoodTableData.length;
             if (columnIndex === 0) {
                 
                 if (rowIndex % lenth === 0) {
                    return {
                       rowspan: lenth,
    
                       colspan: 1
                    };
                } else {
                    return {
                       rowspan: 0,
                       colspan: 0
                    };
                }
             }
        }
    },
    filters: {
        goodStatusFn: function (status) {
            switch (status) {
                case 0: 
                    return "待确认";
                    break ;
                case 1: 
                    return "待付款";
                    break ;
                case 2: 
                    return "备货中";
                    break ;
                case 3: 
                    return "待发货";
                    break ;
                case 4: 
                    return "已发货";
                    break ;
                case 5: 
                    return "已完成";
                    break ;
                case 6: 
                    return "已退款";
                    break ;
            }
        }
    }
}
</script>
<style>
@import "./index.css";
</style>
